<template>
  <div class="cloud-stock-home">
    <c-title text="门店云库存"></c-title>
    <van-search v-model="cate_name" placeholder="搜索分类" @search="onSearch" shape="round" />
    <div class="content">
      <div class="item" v-for="item in list" :key="item.id">
        <div class="space-between flex mb24">
          <span class='name'>{{ item.name }}({{ item.amount }})</span>
          <div class="flex" style="flex-direction: column;">
            <span class='inventory'>库存:{{ item.nums }}</span>
          </div>
        </div>
        <div class="flex space-around">
          <div class="flex column align-items-center">
            <img style="width: 1.5rem;" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store-cloud-stock/Details.png" />
          <span @click="link(item.id)" style="color: #999; font-size: 0.75rem; margin-top: 0.25rem;">查看明细</span>
          </div>
          <div class='flex column align-items-center'>
            <img style="width: 1.5rem;"  src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store-cloud-stock/assignment.png" />
          <span @click="show_overlay(item.id)" style="color: #999; font-size: 0.75rem; margin-top: 0.25rem;">转让库存</span>
          </div>
        </div>
      </div>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="close" @click="show = false">
            <van-icon name="cross" />
          </div>
          <p class="mt-40" style="font-size: 1.125rem;">转让库存</p>
          <div style=" padding: 0.75rem 1.75rem 1.25rem;">
              <input type="text" v-model="mobile"  placeholder="请输入会员手机号" style="margin-bottom: 0.75rem;"/>
              <input type="text" v-model="nums" placeholder="请输入转让数量"/>
          </div>

          <van-button @click="confirm" color="#EF5452" block
            style="border-radius: 0.3125rem; margin: 0 auto 2.125rem; width: 90%;">确定转让</van-button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { scrollMixin } from '../../../utils/mixin';
export default {
  mixins: [scrollMixin],
  data() {
    return {
      list: [],
      page: 1,
      total_page: 1,
      isLoadMore: false,


      stock_id: null,
      mobile: null,
      nums: null,
      show: false,
      cate_name: "",

      is_manager: false,//是否是店长

    };
  },
  activated() {
    this.isLoadMore = false;
    this.getData()
  },
  methods: {
    show_overlay(id) {
      this.stock_id = id;
      this.show = true;
    },
    onSearch(value) {
      this.getData({ cate_name: value, page: 1 })
    },
    link(stock_id) {
      this.$router.push(this.fun.getUrl('cloudStock_list', { stock_id }, {}))
    },
    async confirm() {
      let json = {
        stock_id: this.stock_id,
        mobile: this.mobile,
        nums: this.nums
      }
      let { result, msg } = await $http.post('plugin.store-cloud-stock.frontend.controllers.home.trans', json, 'loading')
      if (result == 0) {
        return this.$toast(msg)
      }
      this.show = false;
      this.$toast(msg)
    },
    getMoreData() {
      if (this.page >= this.total_page) {
        return;
      }
      this.isLoadMore = false;
      let json = {};
      let page = this.page + 1;
      json.page = page;
      if (this.cate_name) {
        json.cate_name = this.cate_name;
      }
      this.getData(json)
    },
    async getData(json = {}) {
      let { result, msg, data: { data, current_page, last_page } } = await $http.get('plugin.store-cloud-stock.frontend.controllers.home.index', json, 'loading')
      if (result == 0) {
        return this.$toast(msg)
      }
      this.isLoadMore = true;
      this.page = current_page;
      this.total_page = last_page;
      if (current_page == 1) {
        this.list = data || [];
      } else {
        this.list = this.list.concat(data);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.cloud-stock-home {
  .name {
    font-size: 0.9375rem;
  }

  .align-items-center {
    align-items: center;
  }

  .column {
    flex-direction: column;
  }

  .inventory {
    color: #999;
    font-size: 0.75rem;
  }

  .tips {
    position: absolute;
    top: 50%;
    left: 30%;
    color: #ef5452;
    font-size: 0.75rem;
  }

  .text-indent-1 {
    text-indent: 1em;
  }

  input {
    height: 2.3125rem;
    border: 1px solid #e7e7e7;
    opacity: 1;
    border-radius: 0.25rem;
    padding-left: 0.625rem;
    width: 100%;
  }

  .mt-40 {
    margin-top: 1.25rem;
  }

  .mt-22 {
    margin-top: 0.6875rem;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 19.5rem;
    border-radius: 0.625rem;
    position: relative;
    background-color: #fff;
  }

  .close {
    position: absolute;
    top: 3%;
    right: 0.75rem;
    font-size: 0.75rem;
  }

  .mb24 {
    margin-bottom: 0.75rem;
  }

  .flex {
    display: flex;
  }

  .space-around {
    justify-content: space-around;
  }

  .space-between {
    justify-content: space-between;
  }

  .content {
    padding: 0.625rem 0.8125rem;

    .item {
      background: #fff;
      padding: 0.75rem 1rem 1.3125rem 0.8125rem;
      border-radius: 0.3125rem;
      margin-bottom: 0.5rem;
    }
  }
}
</style>
